<!--顾客管理-->
<template>
  <div>
    <!-- 头部按钮和搜索框 -->
    <div class="options">
      <el-input
        v-model="queryParams.status"
        placeholder="请输入状态"
        size="mini"
      ></el-input>
      <el-button type="primary" size="mini" @click="toSearch">查询</el-button>
      <el-button type="primary" size="mini" @click="toAdd">添加</el-button>
      <el-button
        type="danger"
        size="mini"
        @click="toBatchDelete"
        :disabled="isdisabled"
        >批量删除</el-button
      >
    </div>
    <!-- 表格 -->
    <div>
      <el-table
        @selection-change="handleSelectionChange"
        border
        size="mini"
        height="calc(100vh - 150px)"
        :data="customerData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="id" label="编号" width="180"></el-table-column> -->
        <el-table-column
          align="center"
          type="index"
          :index="indexMethod"
          width="100"
          label="编号"
        ></el-table-column>
        <el-table-column
          prop="realname"
          label="姓名"
          width="180"
        ></el-table-column>
        <el-table-column prop="telephone" label="手机号"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="toDelete(scope.row)" type="text" size="small"
              >删除</el-button
            >
            <el-button @click="toEdit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button @click="toDetail(scope.row)" type="text" size="small"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryParams.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryParams.pageSize"
        layout="total,sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 模态框 -->
    <el-dialog @close="dialogClose" :title="title" :visible.sync="visible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item
          prop="username"
          label="用户名"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="realname"
          label="姓名"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="telephone"
          label="手机号"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="password"
          label="密码"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.password"
            autocomplete="off"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="status" label="状态" :label-width="formLabelWidth">
          <el-input
            v-model="form.status"
            autocomplete="off"
            placeholder="启用"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="启用" value="启用"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入vuex或者axios
import { mapActions, mapGetters } from "vuex";
//导入api
import { deleteById, batchDelete } from "@/api/customer.js";
export default {
  data() {
    return {
      // 获取数据的参数
      queryParams: {
        page: 1,
        pageSize: 10,
        status: "",
      },
      //批量删除id数组
      ids: [],
      //模态框的显示与隐藏
      visible: false,
      title: "新增顾客信息",
      formLabelWidth: "120px",
      form: {
        username: "",
        realname: "",
        telephone: "",
        password: "",
        status: "",
      },
      //表单验证
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        realname: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
        ],
        telephone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "电话号码长度在11个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        status: [
          { required: true, message: "请输入活动名称", trigger: "change" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
      //默认禁用
      isdisabled: true,
    };
  },
  computed: {
    ...mapGetters("customer", ["total", "customerData"]),
  },
  methods: {
    ...mapActions("customer", ["findAll", "saveOrUpdate"]),
    handleSizeChange(val) {
      //每页条数发生变化的事件处理函数
      console.log(`每页 ${val} 条`);
      //改变数据模型中的pageSize,设置page为1,发起请求
      this.queryParams.pageSize = val;
      this.queryParams.page = 1;
      //发起请求
      this.findAll(this.queryParams);
    },
    handleCurrentChange(val) {
      //页码发生变化的时间处理程序
      console.log(`当前页: ${val}`);
      this.queryParams.page = val;
      this.findAll(this.queryParams);
    },
    //自定义表格索引
    indexMethod(index) {
      let { page, pageSize } = this.queryParams;
      return (page - 1) * pageSize + index + 1;
    },
    //表格多选
    handleSelectionChange(val) {
      console.log(val);
      console.log(2);
      //val 是一个数组,内部是选中的对象
      this.ids = val.map((item) => item.id);
      //控制批量删除按钮和时候可以启用
      if (this.ids.length > 0) {
        this.isdisabled = false;
      } else {
        this.isdisabled = true;
      }
      // this.multipleSelection = val;
    },

    //查询按钮
    toSearch() {
      this.queryParams.page = 1;
      this.findAll(this.queryParams);
    },
    //添加按钮
    toAdd() {
      //清空表单
      this.form = {};
      this.visible = true;
      this.title = "新增顾客信息";
    },
    //模态框里面的保存按钮
    toSave() {
      //校验数据,数据通过才可以
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.saveOrUpdate({
            form: this.form,
            queryParams: this.queryParams,
          }).then(() => {
            this.visible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //dialog 的关闭回调
    dialogClose() {
      //重置表单
      this.$refs["ruleForm"].resetFields();
    },
    //删除行
    toDelete(row) {
      console.log(row);
      //询问用户是否删除
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //发送请求
          deleteById({ id: row.id })
            .then((res) => {
              if (res.status === 200) {
                //提示用户删除成功,并且刷新数据
                this.$notify({
                  title: "成功",
                  message: "这是一条成功的提示消息",
                  type: "success",
                });
                this.queryParams.page = 1;
                this.findAll(this.queryParams);
              } else {
                this.$notify({
                  title: "失败",
                  message: "这是一条失败的提示消息",
                  type: "error",
                });
              }
            })
            .catch((err) => {
              this.$notify({
                title: "失败",
                message: "这是一条失败的提示消息",
                type: "error",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    toBatchDelete() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //发送请求
          batchDelete({ ids: this.ids.join() })
            .then((res) => {
              if (res.status === 200) {
                //提示用户删除成功,并且刷新数据
                this.$notify({
                  title: "成功",
                  message: "这是一条成功的提示消息",
                  type: "success",
                });
                this.queryParams.page = 1;
                this.findAll(this.queryParams);
              } else {
                this.$notify({
                  title: "失败",
                  message: "这是一条失败的提示消息",
                  type: "error",
                });
              }
            })
            .catch((err) => {
              this.$notify({
                title: "失败",
                message: "这是一条失败的提示消息",
                type: "error",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑按钮
    toEdit(row) {
      console.log(row);
      this.form = { ...row };
      this.title = "修改用户信息";
      this.visible = true;
    },
    //展示细节 -跳转到详情页面
    toDetail(row) {
      console.log(row);
      //跳转路由
      this.$router.push(`/customerDetail/${row.id}/index`);
    },
  },
  created() {
    this.findAll(this.queryParams);
  },
  mounted() {},
};
</script>

<style>
.options div {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 200px;
}
</style>